<template>
  <a-modal :open="visibleModal" title="编辑授权" width="600px" centered class="edit-modal-12" @cancel="handleCancel" @ok="onSubmit">
    <div class="modal-wrap h-229">
      <div class="title">
        {{ detailInfo.licenseId }}_{{ detailInfo.algoName }}_{{ detailInfo.version }}_{{ detailInfo.platform }}_{{ detailInfo.language }}
      </div>
      <a-spin :spinning="loading" tip="数据加载中">
        <ul class="list">
          <li class="list-item">
            <div class="label">机器指纹文件</div>
            <div class="content">
              <upload-fingerprint-file
                v-model:fileName="formData.fileName"
                v-model:fileUrl="formData.fileUrl"
                :app-serve-id="detailInfo.id"
                :show-upload-btn="true"
                :show-preview-btn="false"
                :show-download-btn="false"
                @uploadSuccess="uploadSuccess"
              />
            </div>
          </li>
          <li class="list-item">
            <div class="label">可激活设备数</div>
            <div class="label">
              {{ detailInfo.totalActivateNum }}
              <span v-if="formData?.totalActivateNum"> <i class="iconfont icon-arrow-up-s-fill"></i>{{ formData?.totalActivateNum }}</span>
            </div>
          </li>
        </ul>
      </a-spin>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'
  import { ref } from 'vue'

  import UploadFingerprintFile, { UploadRes } from '@/components/UploadFingerprintFile/index.vue'
  import { authApi } from '@/services/api'

  import { AuthSdkDetail } from '../../types/license'

  const emits = defineEmits(['on-success'])

  const visibleModal = ref(false)
  const loading = ref<boolean>(false)
  const detailId = ref<string>('')

  const formData = ref<UploadRes>({
    sign: '',
    totalActivateNum: 0,
    fileName: '',
    fileUrl: ''
  })

  const uploadSuccess = (data: UploadRes) => {
    formData.value = data
  }

  const onSubmit = async () => {
    try {
      const params = {
        id: detailId.value,
        sign: formData.value.sign
      }
      if (formData.value.sign) {
        await authApi.updateLic(params)
        message.success('操作成功')
        emits('on-success')
      }
      handleCancel()
    } catch (error) {
      console.log(error)
    }
  }

  const detailInfo = ref<AuthSdkDetail>({})
  const getOnlineUpdateById = async (id: string) => {
    try {
      loading.value = true
      const { data } = await authApi.getLicUpdateById(id)()
      detailInfo.value = data as AuthSdkDetail
      formData.value.fileName = detailInfo.value.fileName as string
      loading.value = false
      visibleModal.value = true
    } catch (error) {
      loading.value = false
    }
  }

  const openModal = (id: string) => {
    detailId.value = id
    getOnlineUpdateById(id)
  }

  const handleCancel = () => {
    detailId.value = ''
    formData.value = {
      sign: '',
      totalActivateNum: 0,
      fileName: '',
      fileUrl: ''
    }
    visibleModal.value = false
  }

  defineExpose({
    openModal,
    handleCancel
  })
</script>

<style lang="less" scoped>
  @import '../../styles/common.less';

  .list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px 0;

    .list-item {
      display: flex;
      width: 100%;
      gap: 0 36px;

      .label {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: @text02;

        > span {
          color: @warning;
        }
      }

      .content {
        flex: 1;
        width: 77%;
      }
    }
  }
</style>
